<template>
    <div class="game-card-10100">
        <div class="item-nav" v-if="detail.label">{{detail.label}}</div>
        <div class="box">
            <img :src="detail.gameList[0].cover" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name: 'model10100',
    props: ['data'],
    data () {
        return {
            detail: {
                label: '',
                gameList: [
                    {
                        cover: ''
                    }
                ]
            }
        }
    },
    created () {
        if (this.data) {
            this.detail.label = this.data.label
        }
        if (this.data && this.data.gameList && this.data.gameList.length) {
            this.detail = this.data
        }
    },
    watch: {
        data: {
            handler: function (val) {
                if (val) {
                    this.detail.label = val.label
                }
                if (val && val.gameList && val.gameList.length) {
                    this.detail = val
                }
            },
            deep: true
        }
    }
}
</script>

<style lang="scss">
    .game-card-10100 {
        padding: 18px 16px 20px;
        border-bottom: 1px solid rgba(228,228,228,1);
        .item-nav {
            max-height:42px;
            font-size:16px;
            font-family:SourceHanSansCN-Medium,SourceHanSansCN;
            font-weight:500;
            color:rgba(28,32,44,.8);
            line-height:20px;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            margin-bottom: 14px;
        }
        .box {
            height:252px;
            background:rgba(28,32,44,0.05);
            border-radius:8px;
            border:1px solid rgba(228,228,228,1);
            background-color: #ddd;
            overflow: hidden;
            > img {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
